<!--
 * @Author: your name
 * @Date: 2020-10-26 10:46:53
 * @LastEditTime: 2020-10-29 20:10:33
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \就业班练习d:\桌面\ma-pc\src\views\Fans\index.vue
-->
<template>
  <div class="fans-container">
    <el-card>
      <div slot="header">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
          <el-breadcrumb-item>粉丝管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- tabs组件 -->
      <el-tabs v-model="activeName" type="card" @tab-click="tabClick">
        <el-tab-pane label="粉丝列表" name="list">
          <!-- 列表 -->
          <div class="fans_list">
            <div class="fans_item"
            v-for="fan in fansList"
            :key="fan.id.toString()"
            >
              <el-avatar :size="80" :src="fan.photo"></el-avatar>
              <p>{{fan.name}}</p>
              <el-button type="primary" plain size="small" @click.native="attention">关注</el-button>
            </div>
          </div>

          <!-- 分页 -->
          <el-pagination
            background
            layout="prev, pager, next"
            :page-size="per_page"
            @current-change="changePage"
            :total="total">
          </el-pagination >
        </el-tab-pane>
        <el-tab-pane label="粉丝画像" name="img" >
          <div style="width: 600px;height:400px;" ref="main"></div>
        </el-tab-pane>

      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import { hGetFans, GetFollowers } from '@/api/fans'
import echarts from 'echarts'
export default {
  name: 'fans',
  data () {
    return {
      activeName: 'list',
      per_page: 24, // 一页显示几个
      page: 1, // 当前页
      total: 0, // 总数
      circleUrl: '',
      fansList: [
      ]
    }
  },
  methods: {
    hgetFansList () { // 获取粉丝列表
      hGetFans(this.page, this.per_page).then(res => {
        this.per_page = res.data.data.per_page
        this.page = res.data.data.page
        this.total = res.data.data.total_count
        this.fansList = res.data.data.results
      })
    },
    changePage (page) { // 翻页
      this.page = page
      this.hgetFansList()
    },
    tabClick (tab, event) { // 点击tab栏
      if (tab.name === 'img') {
        this.GetFolls()
      }
    },
    draw (res) { // 配置echarts
      const ages = res.data.data.age
      const ageY = []
      const ageX = []
      for (const key in ages) {
        ageY.push(ages[key])
        ageX.push(key.replace('le', '小于').replace('gt', '大于') + '岁')
      }
      // 用echarts来画图
      // 1. 初始化echarts对象
      // 格式： const echartobj = echarts.init(dom结构)
      // 2. 通过固定格式的option来画图
      // echartobj.setOption(option)
      // 基于准备好的dom，初始化echarts实例
      const myChart = echarts.init(this.$refs.main)// 初始化echarts
      // 指定图表的配置项和数据
      const option = { // 配置echarts
        title: {
          text: '粉丝年龄分布统计图'
        },
        legend: {
          data: ['粉丝数量']
        },
        xAxis: {
          type: 'category',
          // X轴数据项
          data: ageX
        },
        // ['小于18', '小于23', '小于30', '小于40', '小于50', '大于50']
        yAxis: {
          type: 'value'
        },
        series: [{
          // Y轴数据项
          name: '粉丝数量',
          data: ageY,
          type: 'bar',
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(220, 220, 220, 0.8)'
          }
        }]
      }
      myChart.setOption(option)
    },
    GetFolls () { // 拉取粉丝统计并配置柱状图
      GetFollowers().then(res => {
        this.draw(res)
      })
    },
    attention () {
      this.$message({ type: 'success', message: '别试了,没关注这功能' })
    }
  },
  mounted () {
    this.hgetFansList()
  }
}

</script>

<style scoped lang='less'>
.fans_list {
  .fans_item {
    width: 120px;
    height: 170px;
    border: 1px dashed #ddd;
    text-align: center;
    padding-top: 10px;
    display: inline-block;
    margin-right: 30px;
    margin-bottom: 30px;
    p {
      margin: 10px 0;
    }
  }
}
</style>
